<template>
<div class="bikeRenting">
  <el-tabs type="card" @edid="handleTabsEdit" v-model="tableTabsValue">
    <el-tab-pane label="在租列表" name="rentingList">
      <el-form :inline="true" :model="findBikeRenting" class="findBikeRenting" size="mini">
        <el-form-item label="租车开始时间">
          <el-date-picker
            v-model="findBikeRenting.applyDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检索输入" label-width="100px">
          <el-input v-model="findBikeRenting.condition" clearable placeholder="请输入车辆id或者地址"></el-input>
        </el-form-item>
        <el-button type="primary" size="mini" @click="findRentingByCondition">查询</el-button>
      </el-form>
      <div class="bikeRentingList">
        <el-table :data="rentingList" :header-cell-style="{
                'background-color': '#E8E8E8',
                'height': '3.56vw',
                'padding':'0',
                'border': 'none',
                'font-size':'0.7vw',
                'color':'#666666'
            }" height="600"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;overflow: scroll;overflow-x: hidden !important;">
          <el-table-column type="index" label="序号" width="100px"></el-table-column>
          <el-table-column prop="bikeId" label="车辆id" sortable width="150px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenantId" label="租客id" width="150px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenantName" label="租客名字" width="150px"></el-table-column>
          <el-table-column prop="money" label="租金" width="150px"></el-table-column>
          <el-table-column prop="startTime" label="租车开始时间" ></el-table-column>
          <el-table-column prop="endTime" label="租车结束时间" ></el-table-column>
          <el-table-column label="操作" width="130px">
            <template v-slot="scope">
<!--              <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>-->
              <el-button size="mini" type="warning" icon="el-icon-delete" @click="deleteRenting(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
          background
          layout="total,sizes,prev, pager, next"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :total="rentingPage.count"></el-pagination>
      </div>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
export default {
  name: "BikeRenting",
  data(){
    return{
      tableTabsValue:'rentingList',
      tabList:[],
      rentingPage:{
        pageNo:1,
        pageSize:10,
        count:0
      },
      rentingList:[],
      findBikeRenting:{

      }
    }
  },
  methods:{
    sizeChange(val){
      this.rentingPage.pageSize = val;
      this.findRentingByCondition();
    },
    currentChange(val){
      this.rentingPage.pageNo = val;
      this.findRentingByCondition();
    },
    prevClick(val){

    },
    nextClick(val){

    },
    handleTabsEdit(targetName, action){
      if(action==='remove'){
        this.tabList=[];
        this.tableTabsValue='rentingList'
        this.findRentingByCondition();
      }
    },
    findRentingByCondition(){
      let params = {
        pageNo:this.rentingPage.pageNo,
        pageSize: this.rentingPage.pageSize,
        condition:this.findBikeRenting.condition,
      }
      if(this.findBikeRenting.applyDate!=null&&this.findBikeRenting.applyDate!=''){
        params['startTimeSearch'] = this.findBikeRenting.applyDate[0];
        params['endTimeSearch'] = this.findBikeRenting.applyDate[1];
      }
      this.$network.findRentingListPage(params).then(res=>{
        console.log(res)
        this.rentingList = res.data.data.list
        this.rentingPage.count = res.data.data.count;
      }).catch(err=>{
        console.log(err)
      })
    },
    tableRowClassName({row, rowIndex}) {
      let index = rowIndex;
      if (index % 2 == 0) {
        return 'warning-row'
      } else {
        return 'warning-col'
      }
    },
    // edit(){
    //   //修改
    // },
    deleteRenting(id){
      //删除
      this.$confirm('确定删除这条记录吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res=>{
        //向后端发送请求，删除这条数据
        let params = {
          id:id
        }
        this.$network.deleteRenting(params).then(res=>{
          if(res.data.code=='200'){
            this.$message({
              message:'删除成功',
              type:'success'
            })
            this.findRentingByCondition()
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  beforeMount() {
    //页面渲染前掉接口，获取数据
    this.findRentingByCondition()
  }
}
</script>

<style scoped>

</style>
